<template>
    <el-menu
        text-color='#E8E8E8'
        background-color='#3b3f50'
        :router='true'
        mode='horizontal'
        active-text-color='#7266ba'
    >
        <el-menu-item v-for="item in headerList" :index="item.url">
        <el-icon><component :is="item.icon"></component></el-icon>
        {{item.title}}
        </el-menu-item>
    </el-menu>
</template>

<script setup>
    import {ref, reactive, onMounted} from 'vue'

    // 这里是头部工具栏的路径
    const headerList = reactive([
        {title: '首页', url: '/', icon: 'HomeFilled'},
        {title: '文章', url: '/article', icon: 'Notebook'},
        {title: '关于', url: '/about', icon: 'UserFilled'},
    ])
    const headerPic = reactive({
        url:'./src/assets/topic.jpg'
    })

    onMounted(() => {
        // console.log(headerPic.url);
    })

</script>

<style src="@/styles/components/ToolBar.scss" scoped>

</style>



